import { View, Text, StyleSheet, Platform, Image} from 'react-native';

const getTypeDetails = (type) => {
    switch (type) {
        case "Electric":
            return {borderColor: "#ffd700", emoji: "⚡"};
        case "Water":
            return {borderColor: "#6493ea", emoji: "💧"};
        case "Fire":
            return {borderColor: "#ff5733", emoji: "🔥"};
        case "Grass":
            return {borderColor: "#66cc66", emoji: "🌸"};
        default:
            return {borderColor: "#a0a0a0", emoji: "❓"};
    }
}

export default function PokemonCard({ name, image, type, hp, moves, weaknesses }) {
    const { borderColor, emoji } = getTypeDetails(type);
    return (
        <View style={ styles.card }>
            <View style={ styles.nameContainer }>
                <Text style={ styles.name }>{name}</Text>
                <Text style={ styles.hp }>❤️{hp}</Text>
            </View>

            <Image style={ styles.image } source={require("../assets/pikachu.png")} accessibilityLabel={`${name} pokemon`} resizeMode='contain'/>

            <View style={ styles.typeContainer }>
                <View style={[ styles.badge, {borderColor} ]}>
                    <Text style={ styles.emoji }>{emoji}</Text>
                    <Text style={ styles.typeText }>{type}</Text>
                </View>
            </View>

            <View style={ styles.movesContainer }>
                <Text style={ styles.movesText }>Moves: {moves.join(", ")}</Text>
            </View>
            
            <View style={ styles.weaknessContainer }>
                <Text style={ styles.weaknessText }>Weakness: {weaknesses.join(", ")}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: "white",
        borderRadius: 16,
        borderWidth: 2,
        padding: 16,
        ...Platform.select({
            ios: {
                shadowOffset: {width: 2, height: 2},
                shadowColor: "#333",
                shadowOpasity: 0.3,
                shadowRadius: 4
            },
            android: {
                elevation: 5
            }
        })
    },
    nameContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 32
    },
    name: {
        fontSize: 30,
        fontWeight: "600"
    },
    hp: {
        fontSize: 22
    },
    image: {
        width: "100%",
        height: 200,
        marginBottom: 30
    },
    typeContainer: {
        marginBottom: 40,
        alignItems: "center"
    },
    badge: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 6,
        paddingHorizontal: 12,
        borderRadius: 20,
        borderWidth: 4
    },
    emoji: {
        fontSize: 30,
        marginRight: 12
    },
    typeText: {
        fontSize: 22,
        fontWeight: "bold"
    },
    movesContainer: {
        marginBottom: 16
    },
    movesText: {
        fontSize: 22,
        fontWeight: "bold"
    },
    weaknessContainer: {
        marginBottom: 16
    },
    weaknessText: {
        fontSize: 22,
        fontWeight:"bold"
    }
});